<template>
  <div v-if="Object.keys(goods).length !==0" class="content">
    <div class="info-title">{{goods.title}}</div>
    <div class="info-price">
       <span class="o-price">{{goods.price}}</span>
       <span class="n-price">{{goods.oldPrice}}</span>
     <div class="discounts"><span class="discount" v-if='goods.discount'>{{goods.discount}}</span></div>  <span class="discount" v-if='goods.discount'>{{goods.discount}}</span>
    </div>
    <div class="info-sell">
      <span class="sell">{{goods.columns[0]}}</span>
      <span class="collect">{{goods.columns[1]}}</span>
      <span class="constime">{{goods.services[0].name}}</span>
    </div>
    <div class="info-guarantee">
      <div>
      <img :src="goods.services[goods.services.length-3].icon"/>
      <span>{{goods.services[goods.services.length-2].name}}</span>
      </div>
      <div>
      <img :src="goods.services[goods.services.length-1].icon"/>
      <span>{{goods.services[goods.services.length-1].name}}</span> 
      </div>  
    </div>

  </div>
</template>

<script>
export default {
  name:'childenBaseInfo',
  props: {
    goods:{
      type:Object,
      default(){
        return {}
      }
    }
  }
}
</script>

<style  scoped>
    /* .content{
      position:absolute;
    } */
   .info-title{
     margin: 5px;
     color: #5f5f5f;
     font-size: 17px;
     font-weight: bold;
   }
   .info-price{
     margin-top: 10px;
     display: flex;
   }
  
   .o-price{
     font-size: 23px;
     color:var(--color-text)
   }
   .n-price{
     margin: 5px;
     font-size: 16px;
     text-decoration: line-through;
   }
   .discount{
     color: white;
     font-weight: bold;
   }
   .discounts{
     width: 80px;
     height: 20px;
     background-color: var(--color-text);
     text-align: center;
     border-radius: 10px;
   }
  .info-sell{
     margin-top: 20px;
     display: flex;
     justify-content: space-between;
     padding:  5px 0;
     box-shadow: 0px 3px 1px 0px  rgba(192,192,192,0.2);
     /* border-bottom: 1px solid ; */
   }
   .info-sell span{
     font-size: 17px;
     color: #c0c0c0;
   }
   .info-guarantee{
     margin: 10px 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 5px;
     padding:  15px 0;
    box-shadow: 0px 3px 1px 0px  rgba(192,192,192,0.2);
   }
   .info-guarantee img{
     width: 12px;
     height: 12px;
   }
   .info-guarantee span{
     font-size: 15px;
   }
</style>